import React, { type FC, useState, useEffect, useRef } from 'react';
import type { Moment } from 'moment';
import moment from 'moment';
import RangePicker, { RangePickerProps, RangeValueType } from '../PickerInput/RangePicker';
import momentGenerateConfig from '../generate/moment';
import zhCN from "../locale/zh_CN";
import 'antd/dist/antd.less';
import PickerButton from "./picker-button";
import _ from 'lodash';

const Components = { button: PickerButton };

const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
  if (customizePrefixCls) {
    return customizePrefixCls;
  }
  return suffixCls ? `ant-${suffixCls}` : 'ant';
};

function compareValueIsChanged(oldVal?: moment.Moment | string, newVal?: moment.Moment | string) {
  if (oldVal === "" || newVal === "") return false;
  else if (oldVal === "" || newVal === "") return true;
  else if (_.isEmpty(oldVal) && _.isEmpty(newVal)) return false;
  else if (_.isEmpty(oldVal) || _.isEmpty(newVal)) return true;
  _.isString(oldVal) && (oldVal = moment(oldVal));
  _.isArguments(newVal) && (newVal = moment(newVal))
  return !oldVal.isSame(newVal);
}

export type JChargeRangeDateProps = RangePickerProps<any> & { customizePrefixCls?: string };
const formatValueProp = (value: RangeValueType<any>) => {
  let t = _.cloneDeep(value ?? []);
  if(_.isString(t?.[0])){
    if(t[0]==="") t[0]=null;
    else t[0]=moment(t[0]);
  }
  if(_.isString(t?.[1])){
    if(t[1]==="") t[1]=null;
    else t[1]=moment(t[1]);
  }
  return t as RangeValueType<any>;
}

const JChargeDateRange: FC<JChargeRangeDateProps> = (props) => {
  const { customizePrefixCls, value: valueProp, onChange: onChangeProp, ...rest } = props;
  const valuePropFormat = formatValueProp(valueProp);
  const [value, setValue] = useState<[Moment | null, Moment | null] | null>(valuePropFormat);
  const valueRef = useRef<[Moment | null, Moment | null] | null>(valuePropFormat);
  const oriValueRef = useRef<[Moment | null, Moment | null] | null>(valuePropFormat);
  useEffect(() => {
    if (compareValueIsChanged(valuePropFormat?.[0], oriValueRef.current?.[0]) || compareValueIsChanged(valuePropFormat?.[1], oriValueRef.current?.[1])) {
      _.isString(valuePropFormat?.[0]) && (valuePropFormat[0] = moment(valuePropFormat[0]));
      _.isString(valuePropFormat?.[1]) && (valuePropFormat[1] = moment(valuePropFormat[1]));
      setValue(valuePropFormat);
    }
  }, [
    compareValueIsChanged(valuePropFormat?.[0], valueRef.current?.[0]),
    compareValueIsChanged(valuePropFormat?.[1], valueRef.current?.[1]),
  ]);
  const prefixCls = getPrefixCls('picker', customizePrefixCls);
  const onChange = (
    newValue: [Moment | null, Moment | null] | null,
    formatStrings?: [string, string],
  ) => {
    setValue(newValue);
    valueRef.current = newValue;
    onChangeProp?.(newValue, formatStrings);
  };
  const onCalendarChange = (
    newValue: [Moment | null, Moment | null] | null,
    formatStrings?: string[],
  ) => {
    // console.log('Calendar Change:', newValue, formatStrings);
  };
  const sharedProps = {
    generateConfig: momentGenerateConfig,
    value,
    onChange,
    onCalendarChange,
  };
  return (
    <RangePicker<Moment>
      {...sharedProps}
      locale={zhCN}
      prefixCls={prefixCls}
      showTime={{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }}
      prevIcon={<span className={`${prefixCls}-prev-icon`} />}
      nextIcon={<span className={`${prefixCls}-next-icon`} />}
      superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
      superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
      components={Components}
      allowClear
      {...rest}
    />
  );
}

export default JChargeDateRange;
